<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Notepad</title>
  <style type="text/css">
	body,html{
		margin:0px;
		height:100%;
	}

	#txtEditor{
		width:100%;
		height:99%;
		padding:0px;
		margin:0px;
		border:0px;
		font-size: 18px;
      border-style: solid;
      border-width: 1px;
	}
    .text{
      width: 100%;
      height:10%;
      padding:0px;
      margin:0px;
      border:0px;
      font-size: 18px;
      border-style: solid;
      border-width: 1px;
    }

    .leftTree   ul>li{
      list-style: none;
      white-space: nowrap;
    }
    .leftTree   ul{
      padding-left: 20px;
    }
    /* 可展开*/
    .switchOpen
    {
      margin-left:-12px;
      border:6px solid transparent;
      display:inline-block;
      width:0px;
      height:0px;
      border-top-color: black;

    }
    /* 展开完毕*/
    .switchClose
    {
      margin-left:-12px;
      border:6px solid transparent;
      display:inline-block;
      width:0px;
      height:0px;
      border-left-color: black;
      margin-bottom: 2px;

    }

    .selected:before {
      background: #d2d2d2;
      position: absolute;
      width: calc(100%);
      content: "...";
      left: 0px;
      opacity: 0.5;
      pointer-events: none;


    }
    .nselected:before {
      background: #fffff;
      position: absolute;
      width: calc(100%);
      content: "...";
      left: 0px;
      opacity: 0.5;
      pointer-events: none;


    }
    .warp {
      overflow-y: scroll;
      overflow-x: scroll;

      width: calc(100%+33px);
      height: 110%;
      position: relative;
      margin-left: -12px;
    }
  </style>
    <link rel="stylesheet" href="./css/electron-tabs.css">
    <link rel="stylesheet" href="./css/tabsLeft.css">
  </head>


  <body style="margin:0;width: 100%">



  <div class="cwdn">
    <div class="nav">
      <div class="ul-etabs-tabs">
      </div>
    </div>
    <div  class="cwdn-etabs-views">
      <div class="main">

      </div>
    </div>

  </div>
  <div  style="width:  calc(100% - 235px);margin:0px 0 0 235px">
    <div class="etabs-tabgroup">
      <div class="etabs-tabs"></div>
      <div class="etabs-buttons"></div>
    </div>
    <div class="etabs-views">
      <div class="">

      </div>
    </div>
  </div>

  <div style="float:left;width:80%;height:99%;">
    <div class="warp    leftTree" >
      <ul id="container">
        <li class="selected"> <input type="checkbox">新建或者打开文件</li>
      </ul>
    </div>
    <textarea id="txtEditor">配置依赖和启动文件，项目名称XXX，依赖都管核心包、网页基础包。</textarea>
  </div>
  <div style="float:left;width:19%;height:99%;">
    <span> id  <button type="button" id="saveStr">保存 </button>  <button type="button" id="delStr">删除 </button>

    <button type="button" id="showStr">查看 </button>
         <button type="button" id="editStr">编辑 </button>
    </span>
    <input  id="id"></input>
    <span>  pid<button type="button" onclick= "ntoStr('pid')">转数 </button>  <button type="button">转字 </button></span>
    <textarea  class="text" id="pid"></textarea>
    <textarea  class="text" id="pidStr"></textarea>
    <span>名称 <button type="button" onclick= "ntoStr('name')">转数 </button>  <button type="button">转字 </button></span>
    <textarea  class="text" id="name"></textarea>
    <textarea  class="text" id="nameStr"></textarea>
    <span>  内容 <button type="button" onclick= "ntoStr('value')">转数 </button>  <button type="button">转字 </button></span>
    <textarea  class="text" id="value"></textarea>
    <textarea  class="text" id="valueStr"></textarea>
    <span> 类型 <button type="button" onclick= "ntoStr('type')">转数 </button>  <button type="button">转字 </button></span>
    <textarea  class="text" id="type"></textarea>
    <textarea  class="text" id="typeStr"></textarea>
  </div>
</body>
  <script   >
    import { ipcRenderer, remote } from 'electron';
    function  toStr(id,pid,name,value,type){
      document.getElementById('id').value=id.toString();
      document.getElementById('pid').value=pid.toString();
      document.getElementById('name').value=name.toString();
      document.getElementById('value').value=value.toString();
      document.getElementById('type').value=type.toString();
      document.getElementById('pidStr').value=StrTo.numToUtf8(pid.toString());
      document.getElementById('nameStr').value=StrTo.numToUtf8(name.toString());;
      document.getElementById('valueStr').value=StrTo.numToUtf8(value.toString());;
      document.getElementById('typeStr').value=StrTo.numToUtf8(type.toString());;
    };
    function ntoStr(id){
     let str=      document.getElementById(id+'Str').value;
      document.getElementById(id).value=StrTo.numToUtf8(str);
    }
    require('./index.js');
    const  StrTo = require('./StrTo.js').default;


    const TabGroup = require("./js/winTabs.js");
    let tabGroup2 = new TabGroup({
      newTab: {
        title: 'New Tab'
      },
      tabContainerSelector:".ul-etabs-tabs",
      viewContainerSelector:".cwdn-etabs-views",
      tabClass:  "li-etabs-tab",
      viewClass:"main"
    });
    tabGroup2.addTab({
      title: '编辑基础文件',
      src: './html/RdDeitor.html',
      visible: true,
      active: true,
      closable:false,
      obj:{id:1},
      showFunc:projectShow
    });
    tabGroup2.addTab({
      title: "配置",
      src: "./html/BuildZh.html",
      visible: true,
      active: true,
      closable:false,
      obj:{id:2},
      showFunc:projectShow
    });
    tabGroup2.addTab({
      title: "编译",
      src: "./html/BuildZh.html",
      visible: true,
      active: true,
      closable:false,
      obj:{id:3},
      showFunc:projectShow
    });
    function projectShow(obj) {
      debugger
      ipcRenderer.send('projectShow',{data:obj,msg:"显示项目"})
    }
    function fileShow(obj) {

      debugger
      ipcRenderer.send('showFile',{data:obj,msg:"显示文件"})
    }
    function fileClose(obj) {

      debugger
      ipcRenderer.send('fileClose',{data:obj,msg:"关闭文件"})
    }


    let tabGroup = new TabGroup({
      newTab: {
        title: 'New Tab'
      }
    });

    function openFlie(obj) {
      tabGroup.addTab({
        title: obj.name,
        src: './hmtl/web.html',
        visible: true,
        active: true,
        obj: obj,
        showFunc: fileShow,
        closeFunc: fileClose
      });
    }
      tabGroup.addTab({
        title: "编译",
        src: "./html/BuildZh.html",
        visible: true,
        active: true,
        closable:false,
        obj:{id:3},
        showFunc:projectShow
      });
    tabGroup.addTab({
      title: "编译",
      src: "./html/BuildZh.html",
      visible: true,
      active: true,
      closable:false,
      obj:{id:3},
      showFunc:projectShow
    });
    ipcRenderer.on('openFile', (event, arg) => {
      openFlie(arg)
    });
  </script>
</html>
